
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: black;
        }
        .to-animate {
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            top: -25px;
            left: -25px;
            /*border-radius: 25px;*/
            opacity: 1;
        }
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 640px;
            height: 480px;
            display: block;
        }
        path {
            fill: none;
            stroke: #fff;
        }
    </style>
    <script src="jquery-3.4.1.min.js"></script>
</head>

<body>

<svg dth="300px" height="175px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css" >
        .line1 {
            stroke-dasharray: 340;
            stroke-dashoffset:320;
            animation: dash 1.5s linear alternate infinite;
        }
        .line2{
            stroke-dasharray: 320;
            stroke-dashoffset: 320;
            animation: dash2 1.5s linear alternate infinite;
        }
        @keyframes dash {
            from {
                stroke-dashoffset: 320;
            }
            to {
                stroke-dashoffset: 40;
            }
        }
        @keyframes dash2 {
            from{
                stroke-dashoffset: 280;
            }
            to{
                stroke-dashoffset: -40;
            }
        }
    </style>
    <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
    <path fill="transparent" stroke="red" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
    <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
</svg>
<style type="text/css" >
    path{

    }
    .ball {
        margin-top: -180px;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;

        offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
        offset-distance: 0%;

        animation: red-ball 2s;
    }
    @keyframes red-ball {
        from {
            offset-distance: 0%;
        }
        to {
            offset-distance: 100%;
        }
    }
</style>
<svg dth="300px" height="175px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--    <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>-->
</svg>
<div class="ball"></div>

<div class="to-animate"></div>
<svg>
<!--    <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>&ndash;&gt;-->
<!--    <path d="m 227.6035,38.929859 c -17.098,-6.615379 -35.43714,-5.654746 -53.72008,-5.654746 -28.88045,0 -78.608562,23.436783 -69.27063,60.788513 8.30718,33.228734 73.51169,-17.343534 73.51169,25.446354 0,111.52514 -170.5191138,45.29238 -156.919185,154.09181 2.924851,23.39881 26.328181,58.41063 40.996904,76.33907 58.597841,71.61958 74.550601,-43.6165 130.059141,-32.51479 51.57633,10.31527 43.90688,155.47922 168.22868,115.92228 167.51141,-53.29909 -59.7547,-112.77835 8.48212,-169.64236 48.39108,-40.32591 95.07686,92.99483 193.67503,8.48212 36.29006,-31.10577 60.13025,-119.23372 -1.41369,-145.6097 C 531.50007,113.83552 494.02863,119.47348 466.5165,101.13206 447.3794,88.373995 454.4009,55.952532 431.17434,45.99829 381.32712,24.635198 348.07325,65.928309 303.94257,71.444645 274.33127,75.146057 256.00673,42.987462 227.6035,38.929859 z"-->
<!--    />-->
    <path d="M100 150 L200 50 L300 150 L400 50 Z"

          stroke="#ccc" stroke-width="2"

          fill="none"

    />
</svg>
<script>

// var start = performance.now();
// var box = document.querySelector('.to-animate');
// var path = document.querySelector('path');
// var len = path.getTotalLength();
// var timer;
// function frame() {
//
// var now = performance.now();
//
// var phase = ((now - start) / 6000) % 1;
// phase +=0.01;
// var point = path.getPointAtLength(len * phase);
// var mark = path.getPointAtLength(len)
//     console.log(point)
//
// box.style.transform = 'translate3d(' + point.x + 'px,' + point.y + 'px,0)'; // IE
// box.style.WebkitTransform = 'translate3d(' + point.x + 'px,' + point.y + 'px,0)'; // Chrome&Safari
//             if(Math.floor(point.x) == Math.floor(mark.x) &&  Math.floor(point.y) == Math.floor(mark.y)){
//                 console.log(point)
//                 console.log(mark)
//                 console.log('结束了')
//                 cancelAnimationFrame(timer);
//             }else {
//                 timer = requestAnimationFrame(frame);
//             }
// }


frame();
</script>
</body>
</html>